<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查找筛选器</title>
</head>
<br>
<div class="div0"> hello div0
    <div class="outer" id="div1">hello div
        <div class="inner">ininer
            <p> inner p</p>
            <div>孙子代</div>
        </div>
        <p class="p" id="p1">helllo p</p>
        <a href="" class="a" id="a"> hello a </a>

    </div>
</div>
<div class="div2"> hello div2</div>
<div class="div3"> hello div3</div>
<ul>
    <li>11111</li>
    <li id="star">22222</li>
    <li>33333</li>
    <li>44444</li>
    <li>55555</li>
    <li>66666</li>
    <li>77777</li>
    <li>88888</li>
    <li>99999</li>
    <li id="end">10000</li>
    <li>12222</li>
</ul>
<table bgcolor="#8fbc8f" border="1px" cellspacing="2" cellpadding="1">
    <thead>
    <tr>
        <td>www0</td>
        <td>wwwww0</td>
        <td>wwwwww0</td>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td>dddd</td>
            <td>wwr</td>
            <td>wwy</td>
        </tr>
        <tr>
            <td>dddd1</td>
            <td>wwr1</td>
            <td>wwy1</td>
            <td>wwy1</td>
        </tr>
        <tr>
            <td>dddd</td>
            <td>wwr</td>
            <td>wwy</td>
        </tr>
    </tbody>


</table>
<input  class="alex" type="text"><br>
<input type="text"><br>
<input type="checkbox"><br>
<input type="password">

<body>
<!--https://www.bootcdn.cn/-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    //一. 过滤筛选器
//    $("li").eq(2).css("color","red");
//    $("li").first().css("color","red");
//    $("li").last().css("color","red");

//    二.直接筛选器
//    1.子代选择器
//    $(".outer").children("p").css('color','blue');
//    2.后代选择器
//    $(".outer").find("p").css('color','blue');
//     三、向下查找兄弟标签
    // 1.选择第二个后的下一个
//      $('li').eq(1).next().css('color','blue')
//    2.选择第二个后的所有的
//        $('li').eq(1).nextAll().css('color','blue')
//    3..选择一个区间、开区间
//    $('li').eq(1).nextUntil("#end").css('color','blue')
//    四、向上查找兄弟标签
//    1.向上查找一个
//    $('li').eq(4).prev().css('color','blue');
    //    向上查找所有
//    $('li').eq(4).prevAll().css('color','blue');
    //    向上查找一个区间
//    $('li').eq(9).prevUntil('#star').css('color','blue')
//    五、查找所有兄弟标签：不包扣自己
//    $('li').eq(9).siblings().css('color','blue')
//六、 查找父标签
    // 1.查找父亲级
//    $(".outer .inner p").parent().css('color','blue')

//    2.查找所有的父亲级(首页的标签)
//    $(".outer .inner p").parents().css('color','red');
//    console.log($(".outer .inner p").parent().html())
//     3.查找父亲级区间的标签
        $(".outer .inner p").parentsUntil("body").css("color",'red')
</script>


</body>
</html>